<template>
    <div class="view">
        <nav-bar title="关于优汇聚福商城" :fixed="false" :shadow="true">
            <div class="back" slot="left" @click="back">
                <i class="iconfont icon-fanhui"></i>
            </div>
        </nav-bar>
        <div class="about-wrap">
            <cube-scroll>
                <list-cell title="服务协议" @click="toPage('onlineArticle','terms_of_service')"></list-cell>
                <list-cell title="优汇聚福商城介绍" @click="toPage('onlineArticle','platform_introduction')" ></list-cell>
<!--                <list-cell title="鸣谢" @click="toPage('onlineArticle','acknowledgement')"></list-cell>-->
                <list-cell title="使用指南" @click="toPage('onlineArticle','guide')"  :showBorder="device.status"></list-cell>

                <list-cell title="版本号" :showBorder="false"  :showArrow="false" :showRightSlot="true" v-if="device.status">
                    <span class="version" slot="rightSlot">{{device.versionName}}.{{device.versionCode}}</span>
                </list-cell>
            </cube-scroll>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import Badge from "@/components/aui/Badge.vue";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import Input from "cube-ui/src/components/input/input.vue";
    import ListCell from "@/components/aui/ListCell.vue";
    import NavBar from "@/components/aui/NavBar.vue";
    import {settingDownload} from "@/store/dispatches";

    @Component({
        components: {
            NavBar, ListCell
        }
    })
    export default class About extends Scene {

        @State("DeviceStore")
        private device!: any;

        private back() {
            this.navigateBack();
        }

        private toPage(name: string, type: string = "") {
            this.navigateTo({
                name: name,
                query: {
                    title: type
                }
            });
        }

    }
</script>

<style scoped lang="stylus">

    .view
        height 100vh;
        width 100vw;
        background $theme-page-common-background-color;

        .about-wrap
            width 100vw;
            height calc(100vh - var(--safe-area-inset-top) - 44px);
            position relative;
            border-top 1px solid rgba(200, 199, 204, .1);

            .version
                color #999;
</style>
